<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建地图场景</title>
  <style>
    html,body{
      overflow: hidden;
      margin: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/@antv/l7"></script>
  <script>

    const scene = new L7.Scene({
      id: 'map',
      map: new L7.GaodeMap({
        style: 'dark', // 样式URL
        center: [120.19382669582967, 30.258134],
        pitch: 0, // 角度
        zoom: 6,
        token: 'e8653883477c1e38d190463340771816'
      })
    });

    scene.on('loaded', () => {
      fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
        .then(res => res.json())
        .then(data => {
          data.features = data.features.filter(item => {return item.properties.capacity > 800;});
          const pointLayer = new L7.PointLayer({})
            .source(data)
            .shape('circle')
            .size('capacity', [0, 16])
            .color('capacity', [
              '#34B6B7',
              '#4AC5AF',
              '#5FD3A6',
              '#7BE39E',
              '#A1EDB8',
              '#CEF8D6'
            ])
            .active(true)
            .style({
              opacity: 0.5,
              strokeWidth: 0
            });
            scene.addLayer(pointLayer);
        })
    })

  </script>
</body>
</html>